@use "scss/colors";
@use "scss/mixins";
@use "scss/variables";
@use "scss/z-indices";

.cardHeader {
  border-bottom: variables.$border-thin solid colors.$grey-100;
}

.clickableHeader {
  background-color: inherit;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  white-space: nowrap;
  display: flex;
  align-items: center;
  padding: 0;

  .icon {
    margin-left: variables.$spacing-sm;
  }
}

.search {
  flex-basis: 400px;
}

.tableContainer {
  .syncing {
    background: none;
    @include mixins.striped-background(colors.$dark-blue-30, 30px);
  }

  .syncing--next {
    background: colors.$grey-40;

    &.row:hover {
      background-color: colors.$grey-40;
    }
  }

  .statusHeader {
    width: 0;
  }

  .statusCell {
    white-space: nowrap;
  }

  .actionsHeader {
    width: 50px;
  }

  .row:hover {
    background-color: colors.$foreground;
  }
}
